<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link
      href="https://fonts.googleapis.com/css?family=Lato:300,300i,700"
      rel="stylesheet"
    />

    <link rel="stylesheet" href="css/style.css" />
    <link rel="shortcut icon" type="image/png" href="img/favicon.png" />

    <title>Natours | Exciting tours for adventurous people</title>
  </head>
  <body>
    <header class="header">
      <nav class="nav nav--tours">
        <a href="#" class="nav__el">All tours</a>
        <form class="nav__search">
          <button class="nav__search-btn">
            <svg>
              <use xlink:href="img/icons.svg#icon-search"></use>
            </svg>
          </button>
          <input
            type="text"
            placeholder="Search tours"
            class="nav__search-input"
          />
        </form>
      </nav>
      <div class="header__logo">
        <img src="img/logo-white.png" alt="Natours logo" />
      </div>
      <nav class="nav nav--user">
        <a href="#" class="nav__el">My bookings</a>
        <a href="#" class="nav__el">
          <img src="img/user.jpg" alt="User photo" class="nav__user-img" />
          <span>Jonas</span>
        </a>

        <!-- <button class="nav__el">Log in</button>
        <button class="nav__el nav__el--cta">Sign up</button> -->
      </nav>
    </header>

    <!-- In video, this <main> element is wrongly called: <section class="overview">. So in pug template, please use main.main instead of section.overview -->
    <main class="main">
      <div class="card-container">
        <div class="card">
          <div class="card__header">
            <div class="card__picture">
              <div class="card__picture-overlay">&nbsp;</div>
              <img
                src="img/tour-1-cover.jpg"
                alt="Tour 1"
                class="card__picture-img"
              />
            </div>

            <h3 class="heading-tertirary">
              <span>The Forest Hiker</span>
            </h3>
          </div>

          <div class="card__details">
            <h4 class="card__sub-heading">Easy 5-day tour</h4>
            <p class="card__text">
              Breathtaking hike through the Canadian Banff National Park
            </p>
            <div class="card__data">
              <svg class="card__icon">
                <use xlink:href="img/icons.svg#icon-map-pin"></use>
              </svg>
              <span>Banff, Canada</span>
            </div>
            <div class="card__data">
              <svg class="card__icon">
                <use xlink:href="img/icons.svg#icon-calendar"></use>
              </svg>
              <span>April 2021</span>
            </div>
            <div class="card__data">
              <svg class="card__icon">
                <use xlink:href="img/icons.svg#icon-flag"></use>
              </svg>
              <span>3 stops</span>
            </div>
            <div class="card__data">
              <svg class="card__icon">
                <use xlink:href="img/icons.svg#icon-user"></use>
              </svg>
              <span>25 people</span>
            </div>
          </div>

          <div class="card__footer">
            <p>
              <span class="card__footer-value">$297</span>
              <span class="card__footer-text">per person</span>
            </p>
            <p class="card__ratings">
              <span class="card__footer-value">4.9</span>
              <span class="card__footer-text">rating (21)</span>
            </p>
            <a href="#" class="btn btn--green btn--small">Details</a>
          </div>
        </div>

        <div class="card">
          <div class="card__header">
            <div class="card__picture">
              <div class="card__picture-overlay">&nbsp;</div>
              <img
                src="img/tour-2-cover.jpg"
                alt="Tour 1"
                class="card__picture-img"
              />
            </div>

            <h3 class="heading-tertirary">
              <span>The Sea Explorer</span>
            </h3>
          </div>

          <div class="card__details">
            <h4 class="card__sub-heading">Medium-difficult 7-day tour</h4>
            <p class="card__text">
              Exploring the jaw-dropping US east coast by foot and by boat
            </p>
            <div class="card__data">
              <svg class="card__icon">
                <use xlink:href="img/icons.svg#icon-map-pin"></use>
              </svg>
              <span>Oregon, US</span>
            </div>
            <div class="card__data">
              <svg class="card__icon">
                <use xlink:href="img/icons.svg#icon-calendar"></use>
              </svg>
              <span>June 2021</span>
            </div>
            <div class="card__data">
              <svg class="card__icon">
                <use xlink:href="img/icons.svg#icon-flag"></use>
              </svg>
              <span>4 stops</span>
            </div>
            <div class="card__data">
              <svg class="card__icon">
                <use xlink:href="img/icons.svg#icon-user"></use>
              </svg>
              <span>15 people</span>
            </div>
          </div>

          <div class="card__footer">
            <p>
              <span class="card__footer-value">$497</span>
              <span class="card__footer-text">per person</span>
            </p>
            <p class="card__ratings">
              <span class="card__footer-value">4.8</span>
              <span class="card__footer-text">rating (12)</span>
            </p>
            <a href="#" class="btn btn--green btn--small">Details</a>
          </div>
        </div>

        <div class="card">
          <div class="card__header">
            <div class="card__picture">
              <div class="card__picture-overlay">&nbsp;</div>
              <img
                src="img/tour-3-cover.jpg"
                alt="Tour 1"
                class="card__picture-img"
              />
            </div>

            <h3 class="heading-tertirary">
              <span>The Snow Adventurer</span>
            </h3>
          </div>

          <div class="card__details">
            <h4 class="card__sub-heading">Difficult 3-day tour</h4>
            <p class="card__text">
              Exciting adventure in the snow with snowboarding and skiing
            </p>
            <div class="card__data">
              <svg class="card__icon">
                <use xlink:href="img/icons.svg#icon-map-pin"></use>
              </svg>
              <span>Aspen, USA</span>
            </div>
            <div class="card__data">
              <svg class="card__icon">
                <use xlink:href="img/icons.svg#icon-calendar"></use>
              </svg>
              <span>January 2022</span>
            </div>
            <div class="card__data">
              <svg class="card__icon">
                <use xlink:href="img/icons.svg#icon-flag"></use>
              </svg>
              <span>2 stops</span>
            </div>
            <div class="card__data">
              <svg class="card__icon">
                <use xlink:href="img/icons.svg#icon-user"></use>
              </svg>
              <span>10 people</span>
            </div>
          </div>

          <div class="card__footer">
            <p>
              <span class="card__footer-value">$697</span>
              <span class="card__footer-text">per person</span>
            </p>
            <p class="card__ratings">
              <span class="card__footer-value">4.9</span>
              <span class="card__footer-text">rating (7)</span>
            </p>
            <a href="#" class="btn btn--green btn--small">Details</a>
          </div>
        </div>

        <div class="card">
          <div class="card__header">
            <div class="card__picture">
              <div class="card__picture-overlay">&nbsp;</div>
              <img
                src="img/tour-4-cover.jpg"
                alt="Tour 1"
                class="card__picture-img"
              />
            </div>

            <h3 class="heading-tertirary">
              <span>The City Wanderer</span>
            </h3>
          </div>

          <div class="card__details">
            <h4 class="card__sub-heading">Easy 7-day tour</h4>
            <p class="card__text">
              Living the life of Wanderlust in the US' most beatiful cities
            </p>
            <div class="card__data">
              <svg class="card__icon">
                <use xlink:href="img/icons.svg#icon-map-pin"></use>
              </svg>
              <span>NYC, USA</span>
            </div>
            <div class="card__data">
              <svg class="card__icon">
                <use xlink:href="img/icons.svg#icon-calendar"></use>
              </svg>
              <span>March 2021</span>
            </div>
            <div class="card__data">
              <svg class="card__icon">
                <use xlink:href="img/icons.svg#icon-flag"></use>
              </svg>
              <span>3 stops</span>
            </div>
            <div class="card__data">
              <svg class="card__icon">
                <use xlink:href="img/icons.svg#icon-user"></use>
              </svg>
              <span>20 people</span>
            </div>
          </div>

          <div class="card__footer">
            <p>
              <span class="card__footer-value">$997</span>
              <span class="card__footer-text">per person</span>
            </p>
            <p class="card__ratings">
              <span class="card__footer-value">4.8</span>
              <span class="card__footer-text">rating (31)</span>
            </p>
            <a href="#" class="btn btn--green btn--small">Details</a>
          </div>
        </div>

        <div class="card">
          <div class="card__header">
            <div class="card__picture">
              <div class="card__picture-overlay">&nbsp;</div>
              <img
                src="img/tour-5-cover.jpg"
                alt="Tour 1"
                class="card__picture-img"
              />
            </div>

            <h3 class="heading-tertirary">
              <span>The Park Camper</span>
            </h3>
          </div>

          <div class="card__details">
            <h4 class="card__sub-heading">Medium-Difficult 10-day tour</h4>
            <p class="card__text">
              Breathing in Nature in America's most spectacular National Parks
            </p>
            <div class="card__data">
              <svg class="card__icon">
                <use xlink:href="img/icons.svg#icon-map-pin"></use>
              </svg>
              <span>Las Vegas, USA</span>
            </div>
            <div class="card__data">
              <svg class="card__icon">
                <use xlink:href="img/icons.svg#icon-calendar"></use>
              </svg>
              <span>August 2021</span>
            </div>
            <div class="card__data">
              <svg class="card__icon">
                <use xlink:href="img/icons.svg#icon-flag"></use>
              </svg>
              <span>4 stops</span>
            </div>
            <div class="card__data">
              <svg class="card__icon">
                <use xlink:href="img/icons.svg#icon-user"></use>
              </svg>
              <span>15 people</span>
            </div>
          </div>

          <div class="card__footer">
            <p>
              <span class="card__footer-value">$1,497</span>
              <span class="card__footer-text">per person</span>
            </p>
            <p class="card__ratings">
              <span class="card__footer-value">4.9</span>
              <span class="card__footer-text">rating (19)</span>
            </p>
            <a href="/tour.html" class="btn btn--green btn--small">Details</a>
          </div>
        </div>

        <div class="card">
          <div class="card__header">
            <div class="card__picture">
              <div class="card__picture-overlay">&nbsp;</div>
              <img
                src="img/tour-6-cover.jpg"
                alt="Tour 1"
                class="card__picture-img"
              />
            </div>

            <h3 class="heading-tertirary">
              <span>The Sports Lover</span>
            </h3>
          </div>

          <div class="card__details">
            <h4 class="card__sub-heading">Difficult 14-day tour</h4>
            <p class="card__text">
              Surfing, skating, parajumping, rock climbing and more, all in one
              tour
            </p>
            <div class="card__data">
              <svg class="card__icon">
                <use xlink:href="img/icons.svg#icon-map-pin"></use>
              </svg>
              <span>California, USA</span>
            </div>
            <div class="card__data">
              <svg class="card__icon">
                <use xlink:href="img/icons.svg#icon-calendar"></use>
              </svg>
              <span>July 2021</span>
            </div>
            <div class="card__data">
              <svg class="card__icon">
                <use xlink:href="img/icons.svg#icon-flag"></use>
              </svg>
              <span>5 stops</span>
            </div>
            <div class="card__data">
              <svg class="card__icon">
                <use xlink:href="img/icons.svg#icon-user"></use>
              </svg>
              <span>8 people</span>
            </div>
          </div>

          <div class="card__footer">
            <p>
              <span class="card__footer-value">$1,997</span>
              <span class="card__footer-text">per person</span>
            </p>
            <p class="card__ratings">
              <span class="card__footer-value">4.7</span>
              <span class="card__footer-text">rating (23)</span>
            </p>
            <a href="#" class="btn btn--green btn--small">Details</a>
          </div>
        </div>
      </div>
    </main>

    <div class="footer">
      <div class="footer__logo">
        <img src="img/logo-green.png" alt="Natours logo" />
      </div>
      <ul class="footer__nav">
        <li><a href="#">About us</a></li>
        <li><a href="#">Download apps</a></li>
        <li><a href="#">Become a guide</a></li>
        <li><a href="#">Careers</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      <p class="footer__copyright">
        &copy; by Jonas Schmedtmann. All rights reserved.
      </p>
    </div>
  </body>
</html>
